<%inherit file="/uxsino/base.html" /> 
<%block name="content" >
<div class="king-layout2-main mt15" style="width: 960px;">
	<form class="form-horizontal">
		<div class="form-group clearfix ">
			<label class="col-sm-3 control-label bk-lh30 pt0">选择业务：</label>
			<div class="col-sm-9">
				<select name="" id="" class="form-control bk-valign-top">
					<option value="选择项1">选择项1</option>
				</select>
			</div>
		</div>
		<div class="form-group clearfix ">
			<label class="col-sm-3 control-label bk-lh30 pt0">输入内网IP：</label>
			<div class="col-sm-9">
				<input type="text" class="form-control bk-valign-top" id=""
					placeholder="提示信息">
			</div>
		</div>
		<div class="form-group clearfix">
			<div class="col-sm-9 col-sm-offset-3">
				<button type="button" class="king-btn mr10  king-success">提交</button>
				<button type="button" class="king-btn king-default ">取消</button>
			</div>
		</div>
		<div
			style="height: 300px; -webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;"
			id="chart_1533795874649" class="king-chart-box chart-area "
			_echarts_instance_="1533795121472"></div>
	</form>
</div>
<script>
	function createEStandLineChart(conf) {
		var myChart = echarts.init(document.getElementById(conf.selector));
		var legendData = []
		for (var i = 0; i < conf.data.series.length; i++) {
			legendData.push(conf.data.series[i].name)
		}
		myChart.setOption({
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				y : 'bottom',
				data : legendData
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'bar', 'line' ]
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : conf.data.xAxis
			} ],
			yAxis : [ {
				type : 'value',
				splitArea : {
					show : true
				}
			} ],
			series : conf.data.series
		});
	}
	function initEStandLineChart(conf) {
		$.ajax({
			url : conf.url,
			type : 'GET',
			dataType : conf.dataType,
			success : function(res) {
				//获取数据成功
				if (res.result) {
					createEStandLineChart({
						selector : conf.containerId, // 图表容器
						data : res.data, // 图表数据
					});
				}
			}
		})
	}
</script>
<script>
	$(function() {
		initEStandLineChart({
			url : 'https://magicbox.bk.tencent.com/static_api/v3/components/chart3/demo.json',
			dataType : 'json',
			containerId : 'chart_1533795874649'
		});
	});
</script>
</%block>